<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <link href="https://at.alicdn.com/t/c/font_4624650_g210ibq18fh.css" rel="stylesheet">
    <link href="./CSS/demo2.css" rel="stylesheet">
</head>
<body>
<div id="root">
    <!--侧边栏-->
    <div class="left">
        <div class="logo"><a href=""><img alt="" src="./images/Vue.png"><span>管理后台</span></a></div>

        <!--侧边导航栏-->
        <div class="nav_div">
            <ul class="navClass">
                <!--导航分类-->
                <li :key="item.id" :style="{fontWeight: [item.disNone ? '700' : '']}" @click="current(item.id)"
                    v-for="item in navClass">
                    <p :style="{color: [item.disNone ? '#FFFFFF' : '']}">
                        <i class="iconfont" :class="item.icon"></i>
                        {{item.name}}
                        <i class="iconfont" :class="[item.disNone ? 'icon-xiajiantou' : 'icon-lunbojiantou1']"></i>
                    </p>
                    <ul :class="[item.disNone ? 'current_nav' : '']" class="nav_child">
                        <!--子导航-->
                        <!--v-model-->
                        <li :key="items.id" class="nav" v-for="items in item.nav">
                            <p><i class="iconfont" :class="items.icon"></i>{{items.name}}</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

    </div>
    <div class="content">

    </div>
</div>
<script>
    let vm = new Vue({
        el: "#root",
        data() {
            return {
                navClass: [
                    {
                        id: 1, icon: "icon-xitongshouye", name: "首页", disNone: false, navHeight: 0,
                        nav: [
                            {id: 1, icon: "icon-yonghu1", name: "个人中心"}
                        ]
                    }, {
                        id: 2, icon: " icon-shangpinliebiao", name: "商品", disNone: true, navHeight: 0,
                        nav: [
                            {id: 1, icon: "icon-yonghu1", name: "用户管理"},
                            {id: 2, icon: "icon-anquanyinsi", name: "角色管理"}
                        ]
                    }, {
                        id: 3,
                        icon: "icon-24gl-chartBarUpward",
                        name: "图形图表",
                        disNone: false,
                        navHeight: 0,
                        nav: [
                            {id: 1, icon: "icon-yonghu1", name: "用户管理"},
                            {id: 2, icon: "icon-anquanyinsi", name: "角色管理"}
                        ]
                    }, {
                        id: 4, icon: "icon-shezhi", name: "系统设置", disNone: false, navHeight: 0,
                        nav: [
                            {id: 1, icon: "icon-yonghu1", name: "用户管理"},
                            {id: 2, icon: "icon-anquanyinsi", name: "角色管理"}
                        ]
                    }
                ]
            }
        },
        methods: {
            current(navsId) {
                for (let i = 0; i < this.navClass.length; i++) {
                    this.navClass[i].disNone = false
                }
                this.navClass[navsId - 1].disNone = true
                console.log(this.navClass[navsId - 1])
            }

        }
    })
</script>

</body>
</html>